/**
  * Scale dots
  *
  * @author jh3y
*/

$size: 30px;
$margin: 10px;
$color: var(--primary);
$distance: $size + $margin;

@keyframes scale-dots {
  0% {
    transform: scale(0) translateX(-($distance));
  }
  10% {
    transform: scale(1) translateX(-($distance));
  }
  20% {
    transform: scale(0) translateX(-($distance));
  }
  30% {
    transform: scale(0) translateX(0);
  }
  40% {
    transform: scale(1.25) translateX(0);
  }
  50% {
    transform: scale(0) translateX(0);
  }
  60% {
    transform: scale(0) translateX($distance);
  }
  70% {
    transform: scale(1) translateX($distance);
  }
  80%,
  100% {
    transform: scale(0) translateX($distance);
  }

}

.scale-dots:before {
  animation: scale-dots 3s infinite;
  background-color: $color;
  border-radius: 100%;
  content: '';
  height: $size;
  width: $size;
}
